<template>
  <div>
      <!-- 当传进来的floorItem有parent的时候，还要自己调用自己 -->
      <floor v-if="floorItem.parent" :floorItem="floorItem.parent"/>
      <div class="floorWrapper">
          <div class="meta">
              <div class="info">
                  {{floorItem.user.nickname}}
                  <span class="time">2个小时前</span>
              </div>
              <div class="btnReply">回复</div>
          </div>
          <div class="floorContent">{{floorItem.content}}</div>
      </div>
  </div>
</template>

<script>
export default {
    name:'floor',
    props:[
        'floorItem'
    ]
}
</script>

<style lang="less" scoped>
.floorWrapper{
    border: 1px solid #eee;
    background: #f8f8f8;
    padding: 10px;
    .meta{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .time{
            font-size: 14px;
            color: #888;
        }
        .btnReply{
            font-size: 14px;
            color: #888;
        }
    }
    .floorContent{
        margin: 2.778vw 0;
    }
}
</style>